<template>
    <!-- 分销商列表 -->
    <div class="">
        <div class="head">
            <span>分销商列表</span>
        </div>
        <button class="bu1" @click="bu1">添加分销商</button>
        <div class="searchFor">
            <div class="searchFor-1">
                <span>分销商搜索</span>
                <input type="text" placeholder="输入ID搜索" class="sousuo" v-model="id">
                <span>分销商等级</span>
                <el-select v-model="value1" class="m-2" placeholder="请选择" size="small">
                    <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :popper-append-to-body="false"
                    />
                </el-select>
                <!-- <span>申请时间</span>
                <el-date-picker
                  v-model="value11"
                  type="date"
                  placeholder="Pick a date"
                  :default-value="new Date(2023, 5, 5)"
                />
                <span>至</span>
                <el-date-picker
                  v-model="value12"
                  type="date"
                  placeholder="Pick a date"
                  :default-value="new Date(2023, 5, 5)"
                /> -->
                <!-- <span>用户来源</span>
                <el-select v-model="value" class="m-2" placeholder="全部" size="small">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :popper-append-to-body="false"
                    />
                </el-select> -->
            </div>
            <div class="searchFor-2">
                <!-- <span>邀请方搜索</span>
                <input type="text" placeholder="输入昵称搜索" class="sousuo">
                <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp状态</span>
                <el-select v-model="value2" class="m-2" placeholder="全部" size="small">
                    <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :popper-append-to-body="false"
                    />
                </el-select>
                <span>加入时间</span>
                <el-date-picker
                  v-model="value13"
                  type="date"
                  placeholder="Pick a date"
                  :default-value="new Date(2023, 5, 5)"
                />
                <span>至</span>
                <el-date-picker
                  v-model="value14"
                  type="date"
                  placeholder="Pick a date"
                  :default-value="new Date(2023, 5, 5)"
                /> -->
                <button class="bu2" @click="screen">筛选</button>
                <span class="remove" @click="empty">清空</span>
            </div>
        </div>
        <div class="form">
            <el-table
            :data="tableData1.tableData"
            border
            style="width: 100%"
            >
            <el-table-column  label="基本信息" width="180" align="center" >
              <template #default="scope">
                <div class="fromhead" >
                  <div class="fromhead-x">
                    <img :src="scope.row.userMessage.image" alt="">
                  </div>
                  <span>{{ scope.row.userMessage.username }}</span>
                </div>
                <div class="fromhead-a">
                  <div>ID:{{ scope.row.userId}}</div>
                  <div> {{ scope.row.userMessage.name }}</div>
                  <div>{{ scope.row.userMessage.phone }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="lever" label="分销商等级" align="center"/>
            <el-table-column prop="parentName" sortable label="邀请方" align="center"/>
            <el-table-column prop="costCount" sortable label="累计销售金额" align="center" />
            <el-table-column prop="costCount" sortable label="累计佣金" align="center"/>
            <el-table-column prop="childCount" sortable label="当前下线数" align="center"/>
            <el-table-column prop="brokerageCount" sortable label="累计邀请分销商" align="center"/>
            <!-- <el-table-column prop="state" label="状态" align="center"/>
            <el-table-column prop="time" sortable label="时间" align="center"/> -->
            <el-table-column fixed="right" label="operate" width="150" align="center">
            <template #default="scope">
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="passK(scope.row)"
                v-if="scope.row.state=='待审核'"
                >通过</el-button>
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="closeK(scope.row)"
                v-if="scope.row.state=='待审核'"
                >拒绝</el-button>
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="deleteRow(scope.row)"
                >详情</el-button>
                  <el-button
                link
                type="primary"
                size="small"
                @click.prevent="ClearanceK(scope.row)"
                v-if="scope.row.state=='已通过'"
                >清退</el-button>
                
            </template>
            </el-table-column>
            
            </el-table>
            <!-- 分页 -->
          <el-pagination
            :disabled="false"
            :background="true"
            layout="prev, pager, next, jumper"
            :current-page.sync="currentPage"
            :page-size="pagesize"
            :total="Total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- 添加分销商模态框 -->
        <div class="refuse" v-if="increaseshow"> 
          <div class="passView">
            <div class="refuseView-X">
              <span>添加分销商</span>
              <span @click="close()">X</span>
            </div>
            <div class="increase">
              <div class="increase-x">
                <div class="span2">用户搜索</div><input type="text" placeholder="输入ID/昵称搜索">
              </div>
              <div class="increase-x">
                <div class="span2">分销商等级:</div>
                <select id="sel" placeholder="请选择" v-model="value3">
                  <option value= "黄金">黄金</option>
                  <option value="白银" >白银</option  >
                  <option value="青铜">青铜</option>
                </select>
              </div>
              <div class="increase-x">
                <div class="span2">姓名:</div>
                <input type="text" placeholder="请输入姓名">
              </div>
              <div class="increase-x aa">
                <div class="span2">手机号:</div>
                <input type="text" placeholder='请输入手机号'>
              </div>
              <div class="increase-x">
                <button @click="close()" class="closebutton">取消</button>
                <button @click="increasebutton()" class="passbutton">确定</button>
              </div>
            </div>
          </div>
        </div>
        <!-- 通过模态框 -->
        <div class="refuse" v-if="passshow"> 
          <div class="passView">
            <div class="refuseView-X">
              <span>申请分销商</span>
              <span @click="close()">X</span>
            </div>
            <div class="refuseView-Y">
              <div>
                <div class="span1">用户:</div><span>昵称</span>
              </div>
              <div>
                <div class="span1">姓名:</div><span>张山</span>
              </div>
              <div>
                <div class="span1">性别:</div><span>男</span>
              </div>
              <div>
                <div class="span1">地址:</div><span>嘉兴市</span>
              </div>
              <div>
                <button @click="close()" class="closebutton">取消</button>
                <button @click="passbutton()" class="passbutton">通过审核</button>
              </div>
            </div>
          </div>
        </div>
        <!-- 拒绝模态框 -->
        <div class="refuse" v-if="refuseshow"> 
          <div class="refuseView">
            <div class="refuseView-X">
              <span>申请分销商</span>
              <span @click="close()">X</span>
            </div>
            <div class="refuseView-Y">
              <div>
                <div class="span1">用户:</div><span>昵称</span>
              </div>
              <div>
                <div class="span1">姓名:</div><span>张山</span>
              </div>
              <div>
                <div class="span1">性别:</div><span>男</span>
              </div>
              <div>
                <div class="span1">地址:</div><span>嘉兴市</span>
              </div>
              <div>
                <div class="span1">拒绝理由</div>
                <textarea @change="jujueview()" v-model="jueview"></textarea>
                <span>{{jujuezi}}/200</span>
              </div>
              <div>
                <button @click="close()" class="closebutton">取消</button>
                <button @click="determineClose()" class="passbutton">拒绝</button>
              </div>
            </div>
          </div>
        </div>
        <!-- 清退模态框 -->
        <div class="refuse" v-if="Clearanceshow"> 
          <div class="ClearanceshowView">
            <div class="refuseView-X">
              <span>清退分销商</span>
              <span @click="close()">X</span>
            </div>
            <div class="refuseView-Z">
              <div class="refuseView-Z-x">
                <div>!</div><span>清退分销商后，此分销商的下线分销商和下线用户关系将被解除</span>
              </div>
              <div class="refuseView-Z-y">
                <div class="refuseView-Z-y-head">清退后的关系处理</div>
                
                  <div class="mb-2 flex items-center text-sm">
                    <el-radio-group v-model="radio1" class="ml-4">
                      <el-radio label="1" size="large">自由绑定分销商</el-radio>
                      <el-radio label="2" size="large">转移给指定的分销商</el-radio>
                    </el-radio-group>
                    
                  </div>
                  <span class="refuseView-Z-y-a">选择后，下线用户将重新自由绑定分销商</span>
                  <span class="refuseView-Z-y-b">选择后，下线分销商和下线用户将转移给新的分销商</span>
                  <input type="text" placeholder="请输入新分销商的手机号" class="refuseView-Z-y-c" v-if="radio1=='2'">
              </div>
              <div class="buttonwei">
                <button @click="close()" class="closebutton">取消</button>
                <button @click="Clearancebutton()" class="passbutton">确定</button>
              </div>
            </div>
          </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,onBeforeMount, reactive, computed} from 'vue'
import { useRouter } from 'vue-router'
import nuser from '@/service/user'
const value = ref('')
const value1 = ref('')
const value2 = ref('')
const value3=ref('')
const pagesize=ref(5) //每页显示多少条
const currentPage=ref(1) //当前是第几页
const Total=ref() //总条数
const refuseshow=ref(false) //拒绝模态框
const jujuezi=ref(0) //拒绝打字总数
const jueview=ref()   //拒绝输入框的字数
const passshow=ref(false) //通过模态框
const Clearanceshow=ref(false)//清退模态框
const radio1=ref('1') //清退单选框
const increaseshow=ref(false) //添加分销商模态框
// 多久到多久的日期
const value11 = ref('')
const value12 = ref('')
const value13 = ref('')
const value14 = ref('黄金')
const id=ref()//id
// 路由
const router=useRouter()
onBeforeMount(()=>{
  // Total.value=Number(Math.ceil(tableData.length/pagesize.value)+'0') //初始化更新分页总数
  Total.value=Number(tableData1.tableData.length) //初始化更新分页总数
  // console.log(document.getElementsByClassName('el-pagination__goto'));
  nuser.querydistributor('',0,5,0,'').then((res:any)=>{
    if(res.data.data==null){
      console.log('获取表格数据失败了');
    }
    console.log('===');
    let b=[]
   console.log(res.data.data);
   for(let a of res.data.data){
    // console.log(a);
    if(a.brokerageCount==null){
      a.brokerageCount=0
    }
    if(a.costCount==null){
      a.costCount=0
    }
    b.push(a)
   }
   
   tableData1.tableData=reactive(b)
   console.log(tableData1.tableData);
  })
  
})
// 用户来源
const options = [
  {
    value: '全部',
    label: '全部',
  },
  {
    value: '微信小程序',
    label: '微信小程序',
  },
  {
    value: '公众号',
    label: '公众号',
  }
]
// 分销商等级
const options1 = [
  {
    value: '1',
    label: '1',
  },
  {
    value: '2',
    label: '2',
  },
  {
    value: '3',
    label: '3',
  }
]
// 状态
const options2 = [
  {
    value: '待审核',
    label: '待审核',
  },
  {
    value: '已通过',
    label: '已通过',
  },
  {
    value: '已拒绝',
    label: '已拒绝',
  },
  {
    value: '已清退',
    label: '已清退',
  }
]
// 表格

let tableData1=reactive({tableData:{
    // username:"暴走的王",//昵称
    // img:"郫县",//图片地址
    userId:1,
    // name:'八蛋',
    // phone:"18045276533",
    information: '12987122',
    lever:'白银',
    parentName: '雨神',
    salesAmount: 2320,
    costCount:0,
    Offline: 0,
    childCount: 0,
    brokerageCount:0 ,
    registerTime:'',
    userMessage:{
      image:'',
      id:Number,
      name:'',
      phone:'',
      username:''
    }
  }})
// 表格后面的按钮
const deleteRow = (index: number) => {
//   tableData.value.splice(index, 1)
// console.log(JSON.stringify(index));
let a=JSON.stringify(index)
router.push({
  path:"/details",
  query:{
    view:a
  }
})
}

// 分页
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  pagesize.value=val
  // console.log(pagesize.value=val);
  
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  // console.log(val);
  currentPage.value=val

  
}
// 打开通过框
const passK=((obj:any)=>{
  passshow.value=true
})
// 打开拒绝弹框
const closeK=((obj:any)=>{
  // console.log(obj);
  refuseshow.value=true
})
//清退模态框
const ClearanceK=((obj:any)=>{

  Clearanceshow.value=true
})
//添加分销商按钮
const bu1=(()=>{
  increaseshow.value=true
})
// 拒绝的输入框
const jujueview:any=(()=>{
  let a=jueview.value
  jujuezi.value=a.length  
})
// 关闭拒绝框
const close=(()=>{
  refuseshow.value=false
  passshow.value=false
  Clearanceshow.value=false
  increaseshow.value=false
})
// 通过确认键
const passbutton=(()=>{
  passshow.value=false
})
// 确定拒绝按钮
const determineClose=(()=>{
  refuseshow.value=false
})
// 清退确认框
const Clearancebutton=(()=>{
  Clearanceshow.value=false
})
// 添加分销商
const increasebutton=(()=>{
  increaseshow.value=false
  // console.log(value3.value);
  
})
// 筛选按钮
const screen=(async()=>{
  let b=[{
    userId:1,
    information: '12987122',
    lever:'白银',
    parentName: '雨神',
    salesAmount: 2320,
    costCount:0,
    Offline: 0,
    childCount: 0,
    brokerageCount:0 ,
    registerTime:'',
    userMessage:{
      image:'',
      id:Number,
      name:'',
      phone:'',
      username:''
    }
  }]
  if(id.value!=''&&value1.value==''){
    await nuser.idquerydistributor(id.value).then((res:any)=>{
    if(res.data.data==null){
      console.log('请求失败了');
    }
    b[0].lever=res.data.data.grade
    b[0].userMessage.image=res.data.data.image
    b[0].userMessage.name=res.data.data.name
    b[0].parentName=res.data.data.parentName
    b[0].userMessage.phone=res.data.data.phone
    b[0].registerTime=res.data.data.registerTime
    b[0].userMessage.username=res.data.data.username
    
    tableData1.tableData=reactive(b)
   
  })
  id.value=null
  value1.value=''
  }else if(id.value!=''&&value1.value!=''){
    let a=Number(value1.value)
    nuser.querydistributor('',a,5,0,'').then((res:any)=>{
    if(res.data.data==null){
      console.log('获取表格数据失败了');
    }
    let b=[]
   for(let a of res.data.data){
    if(a.brokerageCount==null){
      a.brokerageCount=0
    }
    if(a.costCount==null){
      a.costCount=0
    }
    b.push(a)
   }
   tableData1.tableData=reactive(b)
  })
  id.value=null
  value1.value=''
  }
  
 
})
// 清空按钮
const empty=(()=>{
  nuser.querydistributor('',0,5,0,'').then((res:any)=>{
    if(res.data.data==null){
      console.log('获取表格数据失败了');
    }
    let b=[]
   for(let a of res.data.data){
    if(a.brokerageCount==null){
      a.brokerageCount=0
    }
    if(a.costCount==null){
      a.costCount=0
    }
    b.push(a)
   }
   tableData1.tableData=reactive(b)
  })
  
})
</script>

<style scoped lang="less">
@zi:14px;
.head{
    width: 100%;
    height: 40px;
    background-color: white;
    span{
        margin-left: 10px;
        line-height: 40px;
        font-size: 14px;
    }
}
.bu1{
    border-radius: 5px;
    border: 1px solid #ed742f;
    background-color: #ed742f;
    color: white;
    width: 90px;
    height:30px;
    line-height: 23px;
    margin-top: 10px;
    margin-bottom: 15px;
}
// 搜索
.searchFor{
    width: 100%;
    height:130px;
    background-color: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #2c2c2c;
    font-size:16px;
    margin-bottom: 20px;
    span{
        margin-right: 10px;
        margin-left: 20px;
    }
    .sousuo{
        width:200px;
        text-align: center;
        height: 25px;
        border-radius: 5px ;
        border: 1px solid #000000
    }
    .sousuo1{
        width:60px;
        text-align: center;
        height: 25px;
        border-radius: 5px ;
        border: 1px solid #000000
    }
    .searchFor-1{
        margin-bottom: 20px;
    }
    .bu2{
        border-radius: 5px;
        border: 1px solid #ed742f;
        background-color: #ed742f;
        color: white;
        width: 60px;
        height:30px;
        line-height: 23px;
        margin-left: 20px;
    }
    .remove{
        color: #ed742f;
    }
}
// 改变下拉框样式
.el-select{
  height:28px
}
//表格数据
.form{
width: 100%;
box-sizing: border-box;
padding: 20px;
background-color: white;
}
.el-pagination{
  display: flex;
  justify-content:flex-end ;
  margin-top: 20px;
}

// 拒绝模态框
  // 模态框公共样式
.refuse{
  position: fixed;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height:100%;
  top: 0;
  left: 0;
}

// 模态框公共样式
.refuseView-X{
  display: flex;
  align-items: center;
  justify-content:space-between ;
  border-bottom: 1px solid #e9e9e9;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
  width: 100%;
  height: 40px;
  span:nth-child(1){
    color:#7a7a7a ;
  }
}
// 模态框公共样式
.refuseView-Y{
  display: flex;
  width: 100%;
  height:100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 14px;
  color: #333333;
  div:nth-child(1){
    width: 60%;
    height: 10%;
  }
  div:nth-child(2){
    width: 60%;
    height: 10%;
  }
  div:nth-child(3){
    width: 60%;
    height: 10%;
  }
  div:nth-child(4){
    width: 60%;
    height: 10%;
  }
  div:nth-child(5){
    width: 60%;
    height: 30%;
    textarea{
      width: 350px;
      height: 160px;
      position: absolute;
      bottom: 90px;
      left:235px
    }
    span{
      position: absolute;
      bottom:95px;
      right:220px
    }
  }
  div{
    display: flex;
  }
}
/deep/.span1{
  width: 70px !important;
  display: flex;
  justify-content: center;
}
// 按钮

.closebutton{
      width: 110px;
      height: 35px;
      background-color: white;
      border: 1px solid green;
      border-radius: 5px;
      margin-right: 60px;
      margin-top: 20px;
    }
.passbutton{
      width: 110px;
      height: 35px;
      background-color: #623ceb;
      border: 1px solid #623ceb;
      color: white;
      border-radius: 5px;
      margin-top: 20px;
    }
  // 通过的模态框
  .passView{
  position: absolute;
  width: 600px;
  height:400px;
  background-color: white;
  left:35%;
  top:20%;
  box-sizing: border-box;
  padding: 10px;
}
  // 拒绝的模态框
.refuseView{
  position: absolute;
  width: 800px;
  height:600px;
  background-color: white;
  left:30%;
  top:15%;
  box-sizing: border-box;
  padding: 10px;
}
//清退的模态框
.ClearanceshowView{
  position: absolute;
  width: 600px;
  height:500px;
  background-color: white;
  left:35%;
  top:15%;
  box-sizing: border-box;
  padding: 10px;
// 清退分销商
.refuseView-Z{
  .refuseView-Z-x{
    display: flex;
    margin-top: 10px;
    div{
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #e5de33;
      color:#000000;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      margin-left: 10px;
    }
    span{
      font-size:14px
    }
  }
  .refuseView-Z-y{
    width: 100%;
    height: 320px;
    margin-top:20px;
    display: flex;
  }
  .refuseView-Z-y-head{
    margin-left:10px;
    color: #333333;
    font-size: 14px;
    margin-right: 20px;
    margin-top: 10px;
  }
  /deep/.el-radio-group{
    flex-direction: column;
    align-items: flex-start
  }
  .el-radio.el-radio--large{
    margin-bottom:30px;
  }
}
}
.buttonwei{
  float: right;
}
.refuseView-Z-y-a{
  position: absolute;
  top: 130px;
  font-size: @zi;
  left:174px;
  color: rgba(0, 0, 0, 0.34);

}
.refuseView-Z-y-b{
  position: absolute;
  top: 200px;
  font-size: @zi;
  left:174px;
  color: rgba(0, 0, 0, 0.34);
}
.refuseView-Z-y-c{
  position: absolute;
  top: 235px;
  font-size: @zi;
  left:170px;
  width: 250px;
  height:30px;
  padding-left: 10px;
  
}
// 表格第一列的样式
.fromhead{
  display: flex;
  font-size: 12px;
}
.fromhead-x{
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  overflow: hidden;
}
img{
  width: 30px;
  height: 30px;
}
.fromhead-a{
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  >div{
    height: 17px;
  }
}
// 添加分销商的数据
.increase{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  margin-top: 10px;
  input{
    width: 150px;
    height:20px;
    text-align: center;
  }
  select{
    width: 160px;
    height:25px;
    text-align: center;
  }
}
.increase-x{
  display: flex;
  align-items: center;
}
.span2{
  width: 100px;
  display: flex;
  justify-content:flex-start;
  align-items: center;
  height:50px;
}
.aa{
  margin-bottom: 40px;
}
</style>